<template>
    <div>
        <Button
            v-hasC="{
                name: 'base-body-parts-create2',
                flag: 'v1/base/body-parts/create',
            }"
            type="primary"
            @click="openedit(-1)"
            >新增</Button
        >
        <Table
            highlight-row
            row-key="id"
            :columns="columns"
            :data="data"
            class="ivu-mt-16"
            @on-cell-click="cellclicktable"
        >
            <template slot-scope="{ row }" slot="status">
                <Badge v-if="row.status === '1'" status="success" text="正常" />
                <Badge v-if="row.status === '0'" status="error" text="停用" />
            </template>
            <template slot-scope="{ row }" slot="sort">
                <span v-if="sortshow === row.id">
                    <InputNumber
                        v-width="'100%'"
                        :formatter="$inputday"
                        v-model="formItem.sort"
                        @on-blur="cellblur"
                    ></InputNumber>
                </span>
                <span v-else>{{ row.sort }}</span>
            </template>
            <template slot-scope="{ row }" slot="operation">
                <a
                    v-hasC="{
                        name: 'base-body-parts-update2',
                        flag: 'v1/base/body-parts/update',
                    }"
                    @click="openedit(row)"
                    >编辑</a
                >
                <Divider
                    v-hasC="{
                        name: 'v1-base-body-parts-body-parts-del',
                        flag: 'v1/base/body-parts/body-parts-del',
                    }"
                    type="vertical"
                />
                <a
                    v-hasC="{
                        name: 'v1-base-body-parts-body-parts-del',
                        flag: 'v1/base/body-parts/body-parts-del',
                    }"
                    @click="deleteTag(row)"
                    >删除</a
                >
            </template>
        </Table>
        <div
            class="ivu-mt iuv-text-center"
            style="display:flex;justify-content: center;"
        >
            <Page
                show-total
                show-elevator
                show-sizer
                :total="total"
                :current.sync="params.page"
                :page-size="params.pageSize"
                :page-size-opts="pageOpts"
                @on-change="changepage"
                @on-page-size-change="changepageSize"
            />
        </div>
        <Modal
            v-model="showedit"
            :title="edits ? '新增' : '编辑'"
            @on-cancel="canceledit('formItem')"
        >
            <Form
                :model="formItem"
                ref="formItem"
                :label-width="80"
                :rules="createRules"
            >
                <FormItem label="名称" prop="name">
                    <Input v-model="formItem.name" placeholder="请输入"></Input>
                </FormItem>
                <FormItem label="排序" prop="sort">
                    <Input v-model="formItem.sort" type="number"></Input>
                </FormItem>
                <FormItem label="父节点">
                    <Select v-model="formItem.pid" clearable>
                        <Option
                            v-for="item in pidlist"
                            :value="item.id"
                            :key="item.id"
                            :disabled="formItem.id === item.id"
                            >{{ item.body_parts_name }}</Option
                        >
                    </Select>
                </FormItem>
                <FormItem label="状态">
                    <i-switch v-model="formItem.status">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="canceledit('formItem')">取消</Button>
                <Button
                    type="primary"
                    :loading="subloading"
                    @click="submitedit('formItem')"
                    >确定</Button
                >
            </div>
        </Modal>
    </div>
</template>
<script>
import mixins from "@/mixins/mixins";
import {
    bodypartsindex,
    bodypartsparentlist,
    bodypartscreate,
    bodypartsupdate,
    deleteBW,
} from "@api/hqapi";
export default {
    name: "skin",
    mixins: [mixins],
    data() {
        return {
            formItem: {
                id: undefined,
                pid: "",
                name: "",
                sort: "",
                status: true,
                section_id: 2,
            },
            sortshow: undefined,
            columns: [
                { title: "名称", key: "body_parts_name", tree: true },
                { title: "排序", key: "sort", slot: "sort" },
                { title: "状态", slot: "status" },
                { title: "操作", slot: "operation" },
            ],
            // 参数
            data: [],
            pidlist: [],
            createRules: {
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                ],
                sort: [
                    {
                        required: false,
                        message: "请输入正整数",
                        pattern: /^[+]{0,1}(\d+)$/,
                        trigger: "blur",
                    },
                ],
            }, // 模态框验证规则
            params: { page: 1, pageSize: 10, section_id: 2 },
        };
    },
    methods: {
        cellclicktable(row, v) {
            if (v.key === "sort") {
                this.sortshow = row.id;
                this.formItem = {
                    id: row.id,
                    pid: row.pid,
                    name: row.body_parts_name,
                    sort: +row.sort,
                    status: +row.status === 1,
                    section_id: 2,
                };
            } else {
                this.sortshow = undefined;
            }
        },
        deleteTag(row) {
            this.$Modal.confirm({
                title: "删除确认",
                content:
                    "删除后将自动清空患者身上的该部位包括所属子部位，不可恢复",
                loading: true,
                onOk: () => {
                    deleteBW({ id: row.id }).then((res) => {
                        this.$Modal.remove();
                        this.$Message.success("删除成功");
                        this.askData();
                    });
                },
            });
        },
        cellblur() {
            let config = {
                id: this.formItem.id,
                pid: this.formItem.pid,
                name: this.formItem.name,
                sort: this.formItem.sort,
                status: this.formItem.status ? 1 : 0,
                section_id: 2,
            };
            bodypartsupdate(config).then(() => {
                this.sortshow = undefined;
                this.formItem = {
                    id: undefined,
                    pid: "",
                    name: "",
                    sort: "",
                    status: true,
                    section_id: 2,
                };
                this.askData();
            });
        },
        initial() {
            this.funaskData = bodypartsindex;
            this.funupdate = bodypartsupdate;
            this.funcreate = bodypartscreate;
            this.askData();
        },
        /* @函数功能: 请求数据 */
        askDatas(res) {
            this.data = res.list;
            this.total = res.total;
            bodypartsparentlist({ section_id: this.params.section_id }).then(
                (res) => {
                    this.pidlist = res;
                }
            );
        },
        paramscancel() {
            this.formItem = {
                id: undefined,
                pid: "",
                name: "",
                sort: "",
                status: true,
                section_id: 2,
            };
        }, // 新增编辑取消数据处理
        paramsedit(row) {
            this.formItem = {
                id: row.id,
                pid: row.pid,
                name: row.body_parts_name,
                sort: +row.sort,
                status: +row.status === 1,
                section_id: 2,
            };
        }, // 新增编辑显示数据处理
        paramssubmit() {
            let config = {
                id: this.formItem.id,
                pid: this.formItem.pid,
                name: this.formItem.name,
                sort: this.formItem.sort,
                status: this.formItem.status ? 1 : 0,
                section_id: 2,
            };
            return config;
        }, // 新增编辑提交数据处理
    },
};
</script>
